<script setup lang="ts">
  import { computed, PropType, ref, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useUpdateType } from '@/services/pages/common/type'

  const visible = defineModel('visible', { type: Boolean, default: false })
  const props = defineProps({
    updateType: {
      type: Object,
      required: true,
    },
    type: {
      type: String as PropType<'commodity' | 'network' | 'order'>,
      required: true,
    },
    orderModuleId: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  const { form, loading, submit, resetForm } = useUpdateType(props.type)

  const inputFormItemLabel = computed(() => {
    switch (props.updateType.level) {
      case 1:
        return '父级分类名称'
      case 2:
        return '二级分类名称'
      default:
        return '三级分类名称'
    }
  })

  // 验证规则
  const rules = ref({
    name: [{ required: true, message: '请填写分类', trigger: ['blur', 'change'] }],
  })

  /**
   * 关闭弹窗
   */
  const closeDialog = () => {
    visible.value = false
    resetForm()
  }

  /**
   * 保存
   */
  const onSave = async () => {
    const res = await submit(props.orderModuleId || '')
    ElMessage({
      type: res.code === 20000 ? 'success' : 'error',
      message: res.message,
      duration: 5000,
      plain: true,
      showClose: true,
    })

    if (res.code === 20000) {
      visible.value = false
      emits('update')
      resetForm()
    }
  }

  /**
   * 将工单分类的sort字段转为纯数字
   */
  const orderTypeSortToNum = () => {
    if ('sort' in form.value) {
      form.value.sort = form.value.sort.toString().replace(/[^\d]/g, '')
    }
  }

  watch(visible, (value) => {
    if (value) {
      if (props.type === 'network') {
        form.value = {
          id: props.updateType.id,
          name: props.updateType.name,
          parentId: props.updateType.parentId,
          status: props.updateType.status,
        }
      }

      if (props.type === 'commodity') {
        form.value = {
          id: props.updateType.id,
          name: props.updateType.name,
          parentId: props.updateType.parentId,
          status: props.updateType.status,
          visibilityType: props.updateType.visibilityType,
        }
      }

      if (props.type === 'order') {
        form.value = {
          id: props.updateType.id,
          name: props.updateType.name,
          parentId: '0',
          status: props.updateType.status,
          sort: props.updateType.sort,
        }
      }
    }
  })
</script>

<template>
  <h-dialog v-model="visible" title="编辑分类" :loading="loading" @close="closeDialog">
    <el-form
      :rules="rules"
      :model="form"
      inline-message
      class="modal_form_content"
      label-position="top"
    >
      <!-- 分类名称 -->
      <el-form-item :label="inputFormItemLabel" prop="name">
        <el-input v-model.trim="form.name" />
      </el-form-item>

      <!-- 分类状态 -->
      <el-form-item label="分类状态" prop="status" class="same_line">
        <el-radio-group v-model="form.status">
          <el-radio :value="false">启用</el-radio>
          <el-radio :value="true">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 工单排序 -->
      <el-form-item v-if="props.type === 'order'" label="工单排序" prop="sort">
        <el-input
          v-if="'sort' in form"
          v-model.trim="form.sort"
          placeholder="请输入工单排序"
          @input="orderTypeSortToNum"
        />
      </el-form-item>

      <el-form-item
        v-if="props.type === 'commodity' && props.updateType.level === 1"
        label="可见类型"
        prop="visibilityType"
      >
        <el-select
          v-if="'visibilityType' in form"
          v-model="form.visibilityType"
          placeholder="请选择可见类型"
        >
          <el-option :value="1" label="全部可见"></el-option>
          <el-option :value="2" label="部门可见"></el-option>
          <el-option :value="3" label="公司可见"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <h-button is-modal type="primary" @click="onSave">确定</h-button>
      <h-button is-modal @click="closeDialog">取消</h-button>
    </template>
  </h-dialog>
</template>
